<template>
  <div style="height:100%;background:#eff3f5">
   <el-scrollbar style="height:100%">
      <div class="boxone" style="height:394px;background:#fff">
          <div class="alarm-modular modular-box">
            <div class="modular-head">
              <span class="title">基础信息</span>
              <div class="modular-toolbar">
                <el-button style="vertical-align: -1px;" @click="visiDialogComp=true"><i class="iconfont icon-sousuo"></i>编辑</el-button>
              </div>
            </div>
            <div class="modular-body">
                  <table class="compTable">
                        <tbody>
                              <tr>
                                  <td width='13.33%' class="titletd">单位名称 : </td>
                                  <td width='20%' class="conttd">宇星科技发展(深圳)有限公司</td>
                                  <td width='13.33%' class="titletd">统一社会信用代码 : </td>
                                  <td width='20%' class="conttd">91440300736261764E</td>
                                  <td width='13.33%' class="titletd">简称 : </td>
                                  <td width='20%' class="conttd">宇星科技</td>
                              </tr>
                              <tr>
                                  <td width='13.33%' class="titletd">法定代表人 : </td>
                                  <td width='20%' class="conttd">杜航</td>
                                  <td width='13.33%' class="titletd">法人电话 : </td>
                                  <td width='20%' class="conttd">18711111111</td>
                                  <td width='13.33%' class="titletd">行政区域 : </td>
                                  <td width='20%' class="conttd">长沙</td>
                              </tr>
                               <tr>
                                  <td width='13.33%' class="titletd">联系人 : </td>
                                  <td width='20%' class="conttd">杜航</td>
                                  <td width='13.33%' class="titletd">联系电话 : </td>
                                  <td width='20%' class="conttd">18711111111</td>
                                  <td width='13.33%' class="titletd">邮政编码 : </td>
                                  <td width='20%' class="conttd">414400</td>
                              </tr>
                              <tr>
                                  <td width='13.33%' class="titletd">企业网址 : </td>
                                  <td colspan="5" class="conttd">www.baidu.con</td>
                              </tr>
                               <tr>
                                  <td width='13.33%' class="titletd">详细地址 : </td>
                                  <td colspan="5" class="conttd">深圳市南山区高新技术产业园清华信息港研发楼B座301号</td>
                              </tr>
                              <tr>
                                  <td width='13.33%' class="titletd">企业介绍 : </td>
                                  <td colspan="5" class="conttd">从事通信及网络产品、机电一体化产品、自动化控制产品、楼宇及小区智能化产品、软件产品、环保自动在线监测仪的研制开发、经营，提供相关的技术咨询及服务。设备和技术的进出口（不含限制项目）。从事自主开发和生产产品的同类和配套产品的批发、佣金代理（拍卖除外）、进出口（不涉及国营贸易管理商品、涉及配额、许可证管理及其它专项规定管理的商品，按国家有关规定办理申请）。从事计算机信息系统集成，从事水文测报系统设计与施工，从事园林绿化工程的设计与施工并从事园林绿化养护管理，提供以上业务相关的技术咨询及技术服务（以上根据法律、行政法规、国务院决定等规定需要审批的，依法取得相关审批文件后方可经营）。^从事通信及网络产品、机电一体化产品、自动化控制产品、楼宇及小区智能化产品、软件产品、环保自动在线监测仪的生产；从事环境工程设计施工，建筑智能化工程设计与施工，市政公用工程施工总承包，机电设备安装工程、电子工程、环保工程设计施工，建设工程总承包；从事环境污染治理设施运营；环保设备的设计、研发、制造、销售、安装、施工（制造项目由分支机构经营）</td>
                              </tr>
                              <tr>
                                  <td width='13.33%' class="titletd">资质上传 : </td>
                                  <td colspan="5" class="conttd">
                                      <p>资质文档1.doc</p>
                                      <p>资质文档2.doc</p>
                                  </td>
                              </tr>
                        </tbody>
                  </table>
            </div>
          </div> 
         
    </div>
    <div class="boxtwo" style="height:446px;margin-top:6px;background:#fff">
          <div class="alarm-modular modular-box">
            <div class="modular-head">
              <span class="title">办事处</span>
              <div class="modular-toolbar">
                    <div class="search-box" style="width: 180px;">
                      <el-input placeholder="关键词"></el-input>
                    </div>
                    <el-button style="vertical-align: -1px;"><i class="iconfont icon-sousuo"></i>查询</el-button>
                    <el-button style="vertical-align: -1px;" @click="visiDialog=true"><i class="iconfont icon-tianjia"></i>新增</el-button>
              </div>
            </div>
            <div class="modular-body">
              <el-table
                :data="tableData"
                border
                style="height: 100%">
                <el-table-column
                  type="index"
                  label="序号"
                  :index="indexMethod"
                  width="50">
                </el-table-column>
                <el-table-column
                  prop="company"
                  width="220"
                  label="单位">
                </el-table-column>
                <el-table-column
                  prop="person"
                  width="300"
                  label="办事处名称">
                </el-table-column>
                 <el-table-column
                  prop="type"
                  label="区域">
                </el-table-column>
                 <el-table-column
                  prop="name"
                  label="联系人">
                </el-table-column>
                 <el-table-column
                  prop="name"
                  label="联系电话">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="经度">
                </el-table-column>
                 <el-table-column
                  prop="name"
                  label="纬度">
                </el-table-column>
                 <el-table-column
                  prop="name"
                  label="地址">
                </el-table-column>
                 <el-table-column
                  prop="name"
                  label="启用">
                </el-table-column>
                 <el-table-column
                 width="200"
                  label="操作">
                    <template>
                      <div>
                          <el-button type="secondBtn">编辑</el-button>
                           <el-button type="secondBtn">删除</el-button>
                      </div>
                    </template>
                </el-table-column>
              </el-table>
            </div>
          </div> 
         
    </div> 
   </el-scrollbar>
    <el-dialog :visible.sync="visiDialog"  width="630px" title="办事处新增" :before-close="closess">
       <div class="dialogcontent">
             <div class="dialog-layout">
                    <ul  class="formul">
                      <li>
                          <div>
                                <span class="layoutspan">行政区划 : </span>&nbsp;
                                <div class="layoutBox" style="width:174px">
                                  <yf-dropdowntree :treeData='treedata' :treeConfig='treeConfig'></yf-dropdowntree>
                                </div>
                          </div>
                          <div>
                                <span class="layoutspan" style="width:84px">办事处名称 : </span>&nbsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-input v-model="input" ></el-input>
                                </div>
                          </div>
                      </li>
                      <li>
                          <div>
                                <span class="layoutspan">联系人 :  </span>&nbsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-input v-model="input" ></el-input>
                                </div>
                          </div>
                          <div>
                               <span class="layoutspan">联系电话 :  </span>&nbsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-input v-model="input" ></el-input>
                                </div>
                          </div>
                      </li>
                      <li>
                          <div class="uploaddiv">
                                 <span style="vertical-align:middle" class="layoutspan">经度-纬度 :</span>&nbsp;
                                  <div class="layoutBox" style="width:180px">
                                    <el-input v-model="input" ></el-input>
                                  </div>
                                  <div class="layoutBox" style="width:180px">
                                    <el-input v-model="input" ></el-input>
                                  </div>
                                  <el-button @click="visiDialogmap = true">地图</el-button>
                          </div>
                      </li>
                      <li>
                           <div class="uploaddiv">
                                <span class="layoutspan">备注 : </span>&nbsp;
                                <div class="layoutBox" style="width:98%">
                                  <el-input v-model="input" type="textarea" :rows="4" placeholder="请输入内容" resize='none'></el-input>
                                </div>
                          </div>
                      </li>
                    </ul>
             </div>
       </div>
       <div slot="footer" class="dialog-footer">
          <el-button type="noticon" @click="visiDialog = false">确 定</el-button>
          <el-button type="noticonsecondBtn" @click="visiDialog = false">取 消</el-button>
       </div>
    </el-dialog>   
    <el-dialog :visible.sync="visiDialogComp"  width="660px" title="运维单位新增" :before-close="closess">
       <div class="dialogcontent">
             <div class="dialog-layout">
                    <ul class="formul">
                      <li>
                          <div>
                                <span class="layoutspan">单位名称 : </span>&emsp;
                                <div class="layoutBox input_code" style="width:178px">
                                  <yf-dropdowntree :treeData='treedata' :treeConfig='treeConfig'></yf-dropdowntree>
                                </div>
                          </div>
                          <div>
                                <span class="layoutspan" style="width:132px">统一社会信用代码 : </span>&emsp;
                                <div class="layoutBox input_code" style="width:180px">
                                  <el-input v-model="input" ></el-input>
                                </div>
                          </div>
                      </li>
                      <li>
                          <div>
                                <span class="layoutspan">简称 :  </span>&emsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-input v-model="input" ></el-input>
                                </div>
                          </div>
                          <div>
                               <span class="layoutspan" style="width:127px">法定代表人 :  </span>&emsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-input v-model="input" ></el-input>
                                </div>
                          </div>
                      </li>
                      <li>
                          <div>
                                <span class="layoutspan">法人电话 :  </span>&emsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-input v-model="input" ></el-input>
                                </div>
                          </div>
                          <div>
                               <span class="layoutspan" style="width:127px">联系人 :  </span>&emsp;
                                <div class="layoutBox input_code" style="width:180px">
                                  <el-input v-model="input" ></el-input>
                                </div>
                          </div>
                      </li>
                      <li>
                          <div>
                                <span class="layoutspan">行政区域 :  </span>&emsp;
                                <div class="layoutBox input_code" style="width:180px">
                                  <el-input v-model="input" ></el-input>
                                </div>
                          </div>
                          <div>
                               <span class="layoutspan" style="width:127px">联系电话 :  </span>&emsp;
                                <div class="layoutBox input_code" style="width:180px">
                                  <el-input v-model="input" ></el-input>
                                </div>
                          </div>
                      </li>
                       <li>
                          <div>
                                <span class="layoutspan">邮政编码 :  </span>&emsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-input v-model="input" ></el-input>
                                </div>
                          </div>
                          <div>
                               <span class="layoutspan" style="width:127px">企业网址 :  </span>&emsp;
                                <div class="layoutBox" style="width:180px">
                                  <el-input v-model="input" ></el-input>
                                </div>
                          </div>
                      </li>
                      <li>
                          <div style="width:100%">
                                <span class="layoutspan">详细地址 : </span>&emsp;
                                <div class="layoutBox input_code" style="width:510px">
                                  <el-input v-model="input"></el-input>
                                </div>
                          </div>
                      </li>
                      <li>
                          <div style="width:100%">
                                <span class="layoutspan">企业介绍 : </span>&emsp;
                                <div class="layoutBox" style="width:510px">
                                  <el-input v-model="input" type="textarea" :rows="3"></el-input>
                                </div>
                          </div>
                      </li>
                      <li>
                          <span class="layoutspan">资质上传 : </span>&emsp;
                                <el-upload
                                  class="upload-demo"
                                  ref="upload"
                                  action="https://jsonplaceholder.typicode.com/posts/"
                                  :on-preview="handlePreview"
                                  :on-remove="handleRemove"
                                  :file-list="fileList"
                                  :auto-upload="false">
                                  <span slot="trigger" class="upload_span_sc"><i class="icon-shangchuan1 iconfont"></i> 上传</span>
                                 
                                </el-upload>
                      </li>
                    </ul>
             </div>
       </div>
       <div slot="footer" class="dialog-footer">
          <el-button type="noticon" @click="visiDialogComp = false">确 定</el-button>
          <el-button type="noticonsecondBtn" @click="visiDialogComp = false">取 消</el-button>
       </div>
    </el-dialog>
     <el-dialog :visible.sync="visiDialogmap"  width="1200px" title="地图" :before-close="closess">
    </el-dialog>
  </div>
</template>

<script>
var treedata = [
  {
    label: "一级 1",
    id: 1,
    children: [
      {
        label: "二级 1-1",
        id: 2,
        children: [
          {
            label: "二级 1-1",
            id: 3,
            children: [
              {
                label: "二级 1-4",
                id: 4
              },
              {
                label: "二级 1-5",
                id: 5
              },
              {
                label: "二级 1-6",
                id: 6
              }
            ]
          },
          {
            label: "二级 1-1",
            id: 7,
            children: [
              {
                label: "二级 1-1",
                id: 8,
         
              },
              {
                label: "二级 1-1",
                id: 9,
            
              },
              {
                label: "二级 1-1",
                id: 10,
              
              }
            ]
          },
          {
            label: "二级 1-1",
            id: 11,
            children: [
              {
                label: "二级 1-1",
                id: 12
              },
              {
                label: "二级 1-1",
                id: 13
              },
              {
                label: "二级 1-1",
                id: 14
              }
            ]
          }
        ]
      }
    ]
  }
];
export default {
  name: '',
  data(){
    return{
      tableData:[{}],
      visiDialog:false,
      visiDialogComp:false,
      visiDialogmap:false,
      tableData: [],
      input1:'宇星科技发展(深圳)有限公司',
      input:'',
      fileList: [],
      dateRange:'',
      treeConfig:{
        showCheckbox:false,
        defaultId:4,
        defaultText:'二级 1-4',
      },
      treedata:treedata
    }
  },
  created(){
    this.$store.commit("setShowlefttree", false);
  },
  methods:{
    indexMethod(index) {
      return index + 1;
    },
    closess(done) {
      done();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
  }
}
</script>

<style scoped lang='less'>
.dialog-layout{
     .layoutspan{
         width: 78px;
      }
}
.modular-box{
  border: 1px solid #dce9fa;
  .modular-head{
    padding: 7px 12px;
    border-bottom: 1px solid #dce9fa;
    line-height: 30px;
    .title{
      font-size: 16px;
      font-weight: 700;
    }
    .title:before{
      content:'';
      display: inline-block;
      width: 3px;
      height: 10px;
      background: #166bce;
      margin: 0 6px 1px 0;
    }
  }
  .modular-body{
    height: calc(100% - 45px);
    padding: 6px;
    .compTable{
       width: 100%;
       border: 1px solid #d6e3f2;
       border-collapse: collapse;
      td{
        border: 1px solid #d6e3f2;
        padding: 6px 0;
      }
      .titletd{
        text-align: right;
        padding-right: 3%;
      }
      .conttd{
        text-align: left;
        padding: 6px 12px;
        p{
          height: 25px;
          line-height: 25px;
        }
      }
    }
  }
}  
.alarm-modular{
    height:100%;
    .modular-toolbar{
      float: right;
    }
}
.search-box{
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin-right: 12px;
  height: 30px;
  line-height: 30px;
  .icon-sousuo{
    position: absolute;
    right: 10px;
    top: 0;
    color: #7c8fa4;
    cursor: pointer;
    font-size: 14px;
    z-index: 2;
  }
  .icon-sousuo:hover{
    color: #166bce;
  }
  .icon-sousuo:active{
    color: #1056a7;
  }
  .search-input{
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 30px;
    top: 0;
    left: 0;
    padding-left: 5px;
    padding-right: 32px;
    outline: none;
    border: 1px solid #c6d1de;
  }
}
</style>
